<!DOCTYPE html>
<html lang="{{.Locale}}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#fff">
    <title>{{.Title}}</title>
    <link rel="stylesheet" href="{{asset .Domain "/fonts/fonts.css" .ContextName}}">
    <link rel="stylesheet" href="{{asset .Domain "/css/cozy-bs.min.css" .ContextName}}">
    <link rel="stylesheet" href="{{asset .Domain "/styles/theme.css" .ContextName}}">
    <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
    {{.Favicon}}
  </head>
  <body class="cirrus">
    <form method="POST" action="/sharings/{{.SharingID}}/discovery" class="d-contents">
      <input type="hidden" name="state" value="{{.State}}" />
      <input type="hidden" name="sharecode" value="{{.ShareCode}}" />
      <input type="hidden" name="shortcut" value="{{.Shortcut}}" />
      <main class="wrapper">
        <header class="wrapper-top">
          <a href="https://cozy.io/" class="btn p-2 d-sm-none">
            		<img src="{{asset .Domain "/images/logo-light.svg"}}" alt="Twake Workplace" class="logo" />
          </a>
        </header>

        <div class="d-flex flex-column align-items-center mb-5">
          <h1 class="h4 h2-md mb-2 text-center">{{t "Sharing Connect to Cozy"}}</h1>
          <p class="text-center mb-5">{{t "Sharing Discovery Intro" .PublicName}}</p>
          <div class="input-group form-floating has-validation w-100 mb-3">
            <input type="text" class="form-control form-control-md-lg {{if or .URLError .NotEmailError}}is-invalid{{end}}" name="slug" autofocus value="{{.RecipientSlug}}" placeholder="claude" inputmode="url" />
            <select name="domain" class="form-select form-select-end w-min-content flex-grow-0">
              <option value="{{.RecipientDomain}}">.{{.RecipientDomain}}</option>
              <option value="">Autre domaine</option>
            </select>
            <span class="select-arrow"></span>
            <label for="slug">{{t "Sharing Discovery URL field"}}</label>
            {{if or .URLError .NotEmailError}}
            <div class="invalid-tooltip mb-1">
              <div class="tooltip-arrow"></div>
              <span class="icon icon-alert bg-danger"></span>
              {{if .URLError}}{{t "Sharing URL Discovery error"}}{{end}}
              {{if .NotEmailError}}{{t "Sharing URL Not email error"}}{{end}}
            </div>
            {{end}}
          </div>
          <div class="align-self-start">
            <a href="https://manager.cozycloud.cc/v2/cozy/remind">{{t "Sharing Forgotten URL"}}</a>
          </div>
        </div>

        <footer class="w-100 d-flex flex-column flex-md-column-reverse">
          {{if .OIDCLink}}
          <a href="{{.OIDCLink}}" class="btn btn-secondary btn-md-lg w-100 mb-3">{{t "Sharing Connect with OIDC"}}</a>
          {{end}}
          {{if .TwakeOIDCLink}}
          <a href="{{.TwakeOIDCLink}}" class="btn btn-secondary btn-md-lg w-100 mb-3">{{t "Sharing Connect with Twake Account"}}</a>
          {{end}}
          <p class="text-center mb-3">
            {{t "Sharing No Cozy"}}
            <a href="{{t "Sharing Discover Cozy URL"}}">
              {{t "Sharing Discover Cozy"}}
            </a>
          </p>
          <button id="login-submit" class="btn btn-primary btn-md-lg w-100 mb-3" type="submit">
            {{if .Shortcut}}
            {{t "Sharing Discovery Shortcut Submit"}}
            {{else}}
            {{t "Sharing Discovery Submit"}}
            {{end}}
          </button>
        </footer>
      </main>
    </form>
    <script src="{{asset .Domain "/scripts/cirrus.js"}}"></script>
  </body>
</html>
